<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>农业视频</title>


    <!-- Expand styles -->
    <link href="../css/app/app.css" rel="stylesheet">
    <link href="../css/app/default.css" rel="stylesheet">
    <link href="../css/mui/mui.css" rel="stylesheet">


    <!-- Custom styles for this template -->
    <!-- <link href="../css/iOS/mobile/mobile.css" rel="stylesheet"> -->
</head>

<body>

    <!-- header -->
    <div class="mobile-content5">
        <div class="widget-default margin-b-5">
            <div class="farming-tab">
                <div id="segmentedControl" class="mui-segmented-control">
                    <a class="mui-control-item mui-active" href="#item1">关注</a>
                    <a class="mui-control-item" href="#item2">推荐</a>
                    <a class="mui-control-item" href="#item3">农技视频</a>
                    <a class="mui-control-item" href="#item4">小视频</a>
                </div>
            </div>
        </div>
        <!-- 关注 -->
        <div id="item1" class="margin-t-60 margin-b-60 mui-control-content mui-active">
            <div class="widget-body widget-default display-flex index-overflow margin-b-10">
                <div class="display-flex">
                    <div class="tuijian-box">
                        <img class="farm-head" src="../img/a.png" alt="">
                        <p class="elli1 font-weight text-center black font-16 font-weight no-margin">江铃</p>
                        <div class="farm-label text-center margin-t-5">
                            <a class="white font-12 bc-head">关注</a>
                        </div>
                    </div>
                    <div class="tuijian-box">
                        <img class="farm-head" src="../img/a.png" alt="">
                        <p class="elli1 font-weight text-center black font-16 font-weight no-margin">江铃</p>
                        <div class="farm-label text-center margin-t-5">
                            <a class="gray font-12 farm-label-bg">已关注</a>
                        </div>
                    </div>
                    <div class="tuijian-box">
                        <img class="farm-head" src="../img/a.png" alt="">
                        <p class="elli1 font-weight text-center black font-16 font-weight no-margin">江铃</p>
                        <div class="farm-label text-center margin-t-5">
                            <a class="gray font-12 farm-label-bg">互相关注</a>
                        </div>
                    </div>
                    <div class="tuijian-box">
                        <img class="farm-head" src="../img/a.png" alt="">
                        <p class="elli1 font-weight text-center black font-16 font-weight no-margin">江铃</p>
                        <div class="farm-label text-center margin-t-5">
                            <a class="white font-12 bc-head">关注</a>
                        </div>
                    </div>
                    <div class="tuijian-box">
                        <img class="farm-head" src="../img/a.png" alt="">
                        <p class="elli1 font-weight text-center black font-16 font-weight no-margin">江铃</p>
                        <div class="farm-label text-center margin-t-5">
                            <a class="gray font-12 farm-label-bg">已关注</a>
                        </div>
                    </div>

                </div>

            </div>
            <!-- 推荐关注 -->
            <p class="widget-default widget-body black font-16 font-weight no-margin padding-b-5">推荐关注</p>
            <div class="widget-default margin-b-3 widget-body">
                <div class="display-flex">
                    <img class="farm-head" src="../img/a.png" alt="">
                    <div class="margin-l-10 width-100">
                        <div class="display-flex align-items-center justify-content-between width-100">
                            <div class="display-flex flex-column justify-content-between">
                                <span class="elli1 font-weight black font-16 font-weight">江铃</span>
                                <p class="gray font-12 padding-t-10 no-margin">粉丝数：111<span
                                        class="padding-l-15">视频量：123</span></p>
                            </div>
                            <div class="farm-label text-center margin-t-5">
                                <a class="white font-12 bc-head">关注</a>
                            </div>
                        </div>
                        <p class="black font-15 elli1 no-margin">种植业-水果-苹果 种植业-水果-苹果 种植业-水果-苹果</p>
                    </div>

                </div>

            </div>
            <div class="widget-default margin-b-3 widget-body">
                <div class="display-flex">
                    <img class="farm-head" src="../img/a.png" alt="">
                    <div class="margin-l-10 width-100">
                        <div class="display-flex align-items-center justify-content-between width-100">
                            <div class="display-flex flex-column justify-content-between">
                                <span class="elli1 font-weight black font-16 font-weight">江铃</span>
                                <p class="gray font-12 padding-t-10 no-margin">粉丝数：111<span
                                        class="padding-l-15">视频量：123</span></p>
                            </div>
                            <div class="farm-label text-center margin-t-5">
                                <a class="white font-12 bc-head">关注</a>
                            </div>
                        </div>
                        <p class="black font-15 elli1 no-margin">种植业-水果-苹果 种植业-水果-苹果 种植业-水果-苹果</p>
                    </div>

                </div>

            </div>


        </div>
        <div class="hobby-footer1 bg-transparent">
            <div class="display-flex align-items-center bot-issue" id="imgpop">
                <img class="issue-img" src="../img/issue.png" alt="">
            </div>
        </div>
        <div id="topProp" class="topProp"></div>
        <div class="propbottom">
            <div
                class="display-flex align-items-center justify-content-around widget-default padding-t-15 padding-b-15">
                <div class="display-flex flex-column align-items-center" id="leftProp">
                    <img class="issue-img" src="../img/farm-video.png" alt="">
                    <span class="font-17 blue1">农技视频</span>
                </div>
                <div class="display-flex flex-column align-items-center" id="rightProp">
                    <img class="issue-img" src="../img/little-video.png" alt="">
                    <span class="font-17 blue1">小视频</span>
                </div>
            </div>
        </div>


    </div>


    <script type="text/javascript" src="../js/jquery.js"></script>
    <script type="text/javascript" src="../js/mui/mui.js"></script>
    <script>
        $("#imgpop").click(function () {
            $(".propbottom").show();
            $("#topProp").show();
        })
        $("#leftProp").click(function () {
            $(".propbottom").hide();
        })
        $("#rightProp").click(function () {
            $(".propbottom").hide();
        })
        $("#topProp").click(function () {
            $(".propbottom").hide();
            $("#topProp").hide();
        })
    </script>
</body>

</html>